<template>
  <div>
    <div class="form">
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="用户名称">
          <el-input v-model="queryForm.userName" placeholder="请输入用户名称"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="queryForm.phonenumber" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select clearable v-model="queryForm.status"  placeholder="请选择状态">
            <el-option label="正常" value="0"></el-option>
            <el-option label="停用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery" icon="el-icon-search">搜索</el-button>
          <el-button @click="handleReset" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" @click="handleAdd" icon="el-icon-plus">新增</el-button>
        <el-button type="success" @click="handleUpdateClick(selectedRows[0])" :disabled="selectedRows.length!==1"  icon="el-icon-edit">修改</el-button>
        <el-button type="danger" :disabled="selectedRows.length===0" icon="el-icon-delete" @click="handleBatchDelete(selectedRows.map(row =>row.id).join(','))">删除</el-button>
      </div>
    </div>
    <div class="table">
    <el-table
      @selection-change="handleTableSelectionChange"
      :data="tableData"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="id"
        label="用户编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="用户名称">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status==='0'">{{scope.row.userName}}</el-tag>
          <el-tag v-if="scope.row.status==='1'" type="danger">{{scope.row.userName}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="nickName"
        label="用户昵称"
        width="180">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status==='0'">{{scope.row.nickName}}</el-tag>
          <el-tag v-if="scope.row.status==='1'" type="danger">{{scope.row.nickName}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="phonenumber"
        label="手机号码"
        width="180">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态">
        <template slot-scope="scope">
        <el-switch
          @change="handleUserStatusChange(scope.row)"
          v-if="scope.row.status"
          active-value="0"
          inactive-value="1"
          v-model="scope.row.status">
        </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button @click="handleUpdateClick(scope.row)" type="text" size="small" >修改</el-button>
          <el-button @click="handleBatchDelete(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <div class="pagination">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total=total>
    </el-pagination>
    </div>

    <el-dialog  :title="dialogMode==='ADD'?'新增用户':'更新用户'" top:15vh :visible.sync="dialogFormVisible">
      <el-form ref="dialogForm" :model="dialogForm" label-width="80px" :rules="rules">
        <el-form-item label="用户名" prop="userName" >
          <el-input v-model="dialogForm.userName" clearable></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName" >
          <el-input v-model="dialogForm.nickName" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户类型" prop="userType" >
          <el-input v-model="dialogForm.userType" clearable></el-input>
          </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="dialogForm.email" clearable></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="phonenumber" >
          <el-input v-model="dialogForm.phonenumber" clearable></el-input>
        </el-form-item>
        <el-form-item label="头像" >
          <el-input v-model="dialogForm.avatar" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码" >
          <el-input v-model="dialogForm.password" show-password clearable></el-input>
        </el-form-item>
        <el-form-item label="状态" >
          <el-select clearable v-model="dialogForm.status"  placeholder="请选择状态">
            <el-option label="正常" value="0"></el-option>
            <el-option label="停用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" >
          <el-input type="textarea" :row="2" v-model="dialogForm.remark" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleAdd">取 消</el-button>
        <el-button type="primary" @click="handleDialogSubmit">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import { addUser, deleteUser, fetchList,updateUser ,getUserById} from '@/api/system-user'
import dialog from 'element-ui/packages/dialog'
export default {
  name: "UserManage",
  computed: {
    dialog() {
      return dialog
    }
  },
  data() {
    return {
      dialogForm: {
        id: '',
        userName: '',
        nickName: '',
        userType: '',
        email: '',
        phonenumber: '',
        password: '',
        remark: '',
        status: ''
      },
      //弹窗模式 ADD新增模式，UPDATE更新模式
      dialogMode: '',
      rules: {
        userName: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
        nickName: [{ required: true, message: '请输入用户昵称', trigger: 'blur' }],
        userType: [{ len: 2, message: '用户类型长度为2位', trigger: 'blur' }],
        email: [{ type: 'email', required: true, message: '请输入邮箱', trigger: 'blur' },
          { min: 8, max: 20, message: '邮箱长度8~20位', trigger: 'blur' }],
        phonenumber: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { len: 11, message: '请输入正确的电话号码', trigger: 'blur' }
        ],
      },
      queryForm: {
        userName: '',
        phonenumber: '',
        status: '',

      },
      dialogFormVisible: false,
      //isDeleteBtnDisabled:true,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      selectedRows: 0
    }
  },
  methods: {
    handleUserStatusChange(row){
      const data ={
        id:row.id,
        status:row.status
      }
      updateUser(data).then(res =>{
        this.getUser()
        this.$message.success("更新成功")
      })
    },
    handleAdd() {
      this.dialogMode = 'ADD'
      this.dialogFormVisible = true
      this.dialogForm = this.$options.data().dialogForm
      // this.$xxx Vue.js提供内置方法
      // this.$refs 约等于document.getElementById
      // this.$nextTick 延后执行，等下一次DOM更新的时候执行
      this.$nextTick(() => {
        this.$refs.dialogForm.resetFields()
        this.$refs.dialogForm.clearValidate()
      })
    },
    handleDialogSubmit() {
      this.$refs.dialogForm.validate((valid) => {
        if (!valid) {
          return false
        }

        if (this.dialogForm === 'ADD') {
          addUser(this.dialogForm).then(res => {
            //里面最慢所以最后进行刷新
            console.log(res)
            this.getUser()
            this.dialogFormVisible = false
            this.$message.success('添加成功')
          })
        } else {
          updateUser(this.dialogForm).then(res => {
            console.log(res)
            this.getUser()
            this.dialogFormVisible = false
            this.$message.success('更新成功')
          })
        }
      })
    },
  handleTableSelectionChange(data) {
    this.selectedRows = data
    //三元表达式简写
    // this.isDeleteBtnDisabled=data.length===0
    console.log(data)
  },
  handleQuery() {
    this.getUser()
  },
  handleReset() {
    this.queryForm.userName = ''
    this.queryForm.phonenumber = ''
    this.queryForm.status = ''
    // this.$options.data()该页面中的所有数据的初始值
    this.queryForm = this.$options.data().queryForm
    this.getUser()
  },
  handleSizeChange(data) {
    console.log(data)
    this.currentPage = 1
    this.pageSize = data;
    this.getUser()
  },
  handleCurrentChange(data) {
    console.log(data)
    this.currentPage = data
    this.getUser()
  },
  getUser() {
    const params = {
      page: this.currentPage - 1,
      size: this.pageSize,
      userName: this.queryForm.userName.trim(),
      phonenumber: this.queryForm.phonenumber,
      status: this.queryForm.status
    }
    fetchList(params).then(res => {
      this.tableData = res.rows
      this.total = res.total
      console.log(res)
    })
  },
  handleUpdateClick(row) {
    this.dialogMode = 'UPDATE'
    this.dialogFormVisible = true
      getUserById(row.id).then(res =>{
        console.log(res.data)
        this.dialogForm=res.data
      })

    // this.dialogForm=JSON.stringify(row) //将对象转换为字符串
    // this.dialogForm=JSON.parse(this.dialogForm) //再将字符串转换为对象

    this.$message({
      showClose: true,
      message: '点击了修改:' + row.userName,
      type: 'error'
    });
    console.log(row)
  },
  //里面最慢所以最后进行刷新
  handleBatchDelete(ids) {
    //将数组拼接成一个以逗号分割的字符串
    deleteUser(ids).then(res => {
      //里面最慢所以最后进行刷新
      console.log(res)
      this.getUser()
      this.$message.success('删除成功')
    })
  },
},
  //在页面加载的时候调用，刷新的页面
  mounted(){
    console.log("mounted")
    this.getUser()
  }
}
</script>

<style scoped lang="scss">
$padding:15px;
.table{
  margin: $padding;
}
.pagination{
  display: flex;
  justify-content: center;
  align-content: center;
  margin: $padding 0px;
}
.form{
  padding: $padding;
}
</style>
